<template>
  <div class="box">
    <div class="box_text">角色信息
        <el-divider></el-divider>
    </div>
    <div class="box_table" style="width: 300px;margin-top: 20px;">
      <el-form ref="form" :model="form" size="mini" label-width="100px">
        <el-form-item label="名称" label-width="80px">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="描述" label-width="80px">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="box_text">角色权限设置
        <el-divider></el-divider>
    </div>
    <div class="box_checkbox" style="margin-left: 40px;">
        <el-checkbox label="商品管理"></el-checkbox>
        <div class="box_checkbox2" style="width: 67%; height: 100px; background-color: #f4f4f4;">
            <el-checkbox label="复选框 A"></el-checkbox>
            <el-checkbox label="复选框 A"></el-checkbox>
            <el-checkbox label="复选框 A"></el-checkbox>
            <el-checkbox label="复选框 A"></el-checkbox>
            <el-checkbox label="复选框 A"></el-checkbox>
            <el-checkbox label="复选框 A"></el-checkbox>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        form:[]
    };
  },
  created() {},
  methods: {},
};
</script>

<style scoped>
.el-checkbox{
    margin-top: 20px;
}
.box {
  width: 70%;
  height: 100%;
  margin: auto;
  background-color: #fff;
}
.box_text {
  padding-top: 20px;
  padding-left: 40px;
  font-size: 14px;
}
</style>